<template>
  <el-dialog
    :visible.sync="showDialog"
    :close-on-click-modal="false"
    title="新建日志"
    width="750px"
    @close="closeView">
    <div class="title">可拖拽图标调整显示顺序（管理后台可自定义配置日志模板）</div>
    <div
      v-loading="loading"
      class="categorys">
      <draggable
        v-model="categorys"
        :options="{ dragClass: 'sortable-drag', forceFallback: false }"
        style="flex-wrap: wrap;"
        class="vux-flexbox"
        @end="draggableEnd">
        <flexbox
          v-for="(item, index) in categorys"
          :key="index"
          class="category-item"
          @click.native="selectCategorys(item)">
          <div
            :style="{ backgroundColor: item.iconColor }"
            class="category-icon">
            <i :class="item.iconClass" />
          </div>
          <div class="category-content">
            <div class="category-name text-one-line">{{ item.name }}</div>
            <div class="category-des text-one-line">
              <el-tooltip effect="dark" :content="item.remark" placement="top">
                <span>{{ item.remark }}</span>
              </el-tooltip>
            </div>
          </div>
        </flexbox>
      </draggable>
    </div>
  </el-dialog>
</template>

<script>
import {
  oaLogTemplatePartListAPI,
  oaLogTemplateSaveSortAPI
} from '@/api/oa/journal'

import Draggable from 'vuedraggable'

// 日志模板选择
export default {
  name: 'LogTemplateSelect',
  components: {
    Draggable
  },
  props: {
    show: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      loading: false,
      showDialog: false,
      categorys: []
    }
  },
  watch: {
    show: function(val) {
      this.showDialog = val
      if (this.categorys && this.categorys.length == 0) {
        this.getDetail()
      }
    }
  },
  mounted() {},
  methods: {
    /**
     * 日志模板列表
     */
    getDetail() {
      this.loading = true
      oaLogTemplatePartListAPI({
        isPart: true,
        pageType: 0
      })
        .then(res => {
          this.loading = false
          const resData = res.data || {}
          const list = resData.list || []
          this.categorys = list.map(item => {
            const temps = item.templateIcon ? item.templateIcon.split(',') : []
            if (temps.length > 1) {
              item.iconClass = temps[0]
              item.iconColor = temps[1]
            } else {
              item.iconClass = 'wk wk-approve'
              item.iconColor = '#9376FF'
            }
            return item
          })
        })
        .catch(() => {
          this.loading = false
        })
    },

    /**
     * 日志模板选择
     */
    selectCategorys(item) {
      this.$emit('select', item)
      this.$emit('close')
    },

    /**
     * 关闭操作
     */
    closeView() {
      this.$emit('close')
    },

    /**
     * 拖拽结束
     */
    draggableEnd() {
      oaLogTemplateSaveSortAPI(this.categorys.map(item => {
        return { configId: item.id }
      }))
        .then(res => {})
        .catch(() => {})
    }
  }
}
</script>

<style scoped lang="scss">
.title {
  position: absolute;
  top: 55px;
  left: 25px;
  font-size: 12px;
  color: $--color-text-secondary;
}

.categorys {
  height: 250px;
  overflow-y: auto;

  .category-item {
    flex: 0 0 31%;
    padding: 10px;
    margin: 5px;
    text-align: center;
    cursor: pointer;
    background-color: #f6f6f6;
    border-radius: $--border-radius-base;
  }

  .category-item:hover {
    background-color: #eef1f8;
  }

  .category-icon {
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: $--border-radius-base;

    .wk {
      font-size: 24px;
      color: white;
    }
  }

  .category-content {
    flex: 1;
    width: 0;
    padding-left: 10px;
    text-align: left;
  }

  .category-name {
    color: $--color-text-primary;
  }

  .category-des {
    margin-top: 4px;
    color: $--color-text-regular;
  }
}
</style>
